<template>
	<view class="order-detail">
		<view class="address flex-center">
			<image class="address-img" src="../../static/images/order-location.png" mode="aspectFill"></image>
			<view class="address-info">
				<view>
					<text class="address-info-name">{{orderDetail.address[0]}}</text>
					<text class="address-info-mobile">{{orderDetail.address[1]}}</text>
				</view>
				<view class="address-info-address text-overflow-two">
					{{orderDetail.address[2]}}
				</view>
			</view>
		</view>
		
		<view class="tit">产品详情</view>
		<view
			class="main flex-center"
			v-for="(item, index) in orderDetail.items"
			:key="index">
			<image class="main-img" :src="item.image" mode="aspectFill"></image>
			<view class="main-right">
				<view class="name-price-amount flex-center-between">
					<view class="name text-overflow-two">{{item.name}}</view>
					<view>
						<view class="price">¥{{item.unit_price}}</view>
						<view class="amount">x{{item.count}}</view>
					</view>
				</view>
				<view class="type">维护费：{{item.upkeep}}</view>
				<view class="daterange">使用时长:{{item.use_time}}</view>
			</view>
		</view>
		
		<view class="prices">
			<view class="price-total flex-center-between">
				<text class="price-item-name">需付款：</text>
				<text class="color-important">¥{{orderDetail.total}}</text>
			</view>
			<view v-if="orderDetail.pay_way !== 5" class="price-total flex-center-between">
				<text class="price-item-name">优惠金额：</text>
				<text class="color-important">-¥{{orderDetail.coupon_price}}</text>
			</view>
		</view>
		
		<view class="tit">订单信息</view>
		<view class="info">
			<view class="info-item flex-center-between">
				<text>订单编号：</text>
				<text>{{orderDetail.order_no}}</text>
			</view>
			<view class="info-item flex-center-between">
				<text>创建时间：</text>
				<text>{{orderDetail.create_time}}</text>
			</view>
			<view class="info-item flex-center-between">
				<text>付款时间：</text>
				<text>{{orderDetail.pay_time}}</text>
			</view>
			<view v-if="orderDetail.shipping_no" class="info-item flex-center-between">
				<text>{{orderDetail.shipping_no[0]}}：</text>
				<text>{{orderDetail.shipping_no[1]}}</text>
			</view>
			<view v-if="orderDetail.shipping_time" class="info-item flex-center-between">
				<text>发货时间：</text>
				<text>{{orderDetail.shipping_time}}</text>
			</view>
			<view class="info-item flex-center-between">
				<text>发票：</text>
				<text @click="showInvoice(orderDetail.invoice)">
					{{orderDetail.invoice.length ? '查看发票' : '无'}}
				</text>
			</view>
			<view class="info-item flex-center-between">
				<text>合同：</text>
				<text @click="showContract(orderDetail.contract)">
					{{orderDetail.contract.length ? '查看合同' : '无'}}
				</text>
			</view>
			<!-- <view class="info-item flex-center-between">
				<text>推荐码：</text>
				<text>
					{{orderDetail.recommend.length ? orderDetail.recommend : '无'}}
				</text>
			</view> -->
			<view v-if="orderDetail.status === 6 || orderDetail.status === 7 || orderDetail.status=== 8" class="info-item flex-center-between">
				<text>退款状态：</text>
				<text style="color: #4CD964;">{{orderDetail.status === 6 ? '退款中': orderDetail.status === 7? '拒绝退款' :'已退款'}}</text>
			</view>			
			<!-- <view class="info-item flex-center-between" v-if="orderDetail.status === 6 || orderDetail.status === 7 || orderDetail.status=== 8">
				<text>退款备注：</text>
				<text>{{orderDetail.refund_remarks ? orderDetail.refund_remarks: '无'}}</text>
			</view>	 -->		
		</view>
		<view v-if="orderDetail.offline" class="tit">支付信息</view>
		<view v-if="orderDetail.offline" class="info">
			<view v-if="orderDetail.offline.payAccount" class="info-item flex-center-between">
				<text>支付账号：</text>
				<text>
					{{orderDetail.offline.payAccount}}
				</text>
			</view>
			<view v-if="orderDetail.offline.payBank" class="info-item flex-center-between">
				<text>支付银行：</text>
				<text>
					{{orderDetail.offline.payBank}}
				</text>
			</view>
			<view v-if="orderDetail.offline.payName" class="info-item flex-center-between">
				<text>付款人：</text>
				<text>
					{{orderDetail.offline.payName}}
				</text>
			</view>
			<view class="info-item flex-center-between" v-if="orderDetail.offline.money">
				<text>支付金额：</text>
				<text>
					{{orderDetail.offline.money}}
				</text>
			</view>
			<view class="info-item flex-center-between" v-if="orderDetail.offline.uses">
				<text>用途：</text>
				<text>
					{{orderDetail.offline.uses}}
				</text>
			</view>
			<view class="info-item flex-center-between">
				<text>审核状态：</text>
				<text style="color:#FF0000">
					 {{!orderDetail.offline.erp? '审核中': orderDetail.offline.erp.AuditStatus === '-1' ? '不通过': '通过'}}
				</text>
			</view>
			<view v-if="orderDetail.offline.erp">
				<view class="info-item flex-center-between">
					<text>支付单号：</text>
					<text>
						 {{orderDetail.offline.erp.PaymentCode}}
					</text>
				</view>
				<view class="info-item flex-center-between" v-if="orderDetail.offline.erp.AuditRemark">
					<text>备注：</text>
					<text>
						 {{orderDetail.offline.erp.AuditRemark}}
					</text>
				</view>
				<!-- <view class="info-item flex-center-between" v-if="orderDetail.offline.erp.AuditRemark">
					<text>附件：</text>
					<image class="license-img" :src="orderDetail.offline.licenseImgUrl" mode="aspectFill"></image>
				</view> -->
			</view>
			<view class="cert-add-upload">
				<text>支付凭证：</text>
				<image
					class="cert-add-upload-img"
					:src="orderDetail.offline.licenseImgUrl"
					mode="aspectFill"
					>
				</image>
			</view>
		</view>
		
		<view v-if="orderDetail.refund_remarks" class="tit">退款信息</view>
		<view v-if="orderDetail.refund_remarks" class="info">
			<view class="info-item flex-center-between">
				<text>收款人：</text>
				<text>
					{{orderDetail.refund_remarks.contactPerson}}
				</text>
			</view>
			<view class="info-item flex-center-between">
				<text>电话：</text>
				<text>
					{{orderDetail.refund_remarks.contactPhone}}
				</text>
			</view>
			<view class="info-item flex-center-between">
				<text>退款方式：</text>
				<text>
					{{orderDetail.refund_remarks.receiveType == '1' ? '微信' : orderDetail.refund_remarks.receiveType == '2' ? '支付宝' : '银行'}}
				</text>
			</view>
			<view class="info-item flex-center-between">
				<text>账号：</text>
				<text>
					{{orderDetail.refund_remarks.account}}
				</text>
			</view>
			<view class="info-item flex-center-between" v-if="orderDetail.refund_remarks.refundReason">
				<text>退款原因：</text>
				<text>
					{{orderDetail.refund_remarks.refundReason}}
				</text>
			</view>
		</view>
		
		<view v-if="orderDetail.trial_rent" class="tit">试租信息</view>
		<view v-if="orderDetail.trial_rent" class="info">
			<view class="info-item flex-center-between">
				<text>单位：</text>
				<text>
					{{orderDetail.trial_rent.companyName}}
				</text>
			</view>
			<view class="info-item flex-center-between">
				<text>联系人：</text>
				<text>
					{{orderDetail.trial_rent.contactName}}
				</text>
			</view>
			<view class="info-item flex-center-between">
				<text>电话：</text>
				<text>
					{{orderDetail.trial_rent.phone}}
				</text>
			</view>
			<view class="info-item flex-center-between">
				<text>用水人数：</text>
				<text>
					{{orderDetail.trial_rent.peopleNum}}
				</text>
			</view>
			<view class="info-item flex-center-between">
				<text>使用性质：</text>
				<text>
					{{orderDetail.trial_rent.useObject}}
				</text>
			</view>
			<view class="info-item flex-center-between">
				<text>水质分类：</text>
				<text>
					{{orderDetail.trial_rent.curWaterType == 'city'?'市政水':'非市政水'}}
				</text>
			</view>
		</view>
		
		<view v-if="orderDetail.renew" class="tit">续租信息</view>
		<view v-if="orderDetail.renew" class="info">
			<view class="info-item flex-center-between">
				<text>续租单号：</text>
				<text>
					{{orderDetail.renew}}
				</text>
			</view>
		</view>
		<!-- <view class="btns">
			<view v-if="orderDetail.status === 1">
				<text class="btn">取消订单</text>
				<text class="btn color-important">付款</text>
			</view>
			<view v-if="orderDetail.status === 2">
				<text class="btn">提醒发货</text>
			</view>
			<view v-if="orderDetail.status === 3">
				<text class="btn">确认收货</text>
			</view>
			<view v-if="orderDetail.status === 4">
				<text class="btn">删除订单</text>
			</view>
		</view> -->
		
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				orderDetail: {}
			}
		},
		onLoad(option) {
			this.getOrderDetail(option.orderId)
		},
		methods: {
			/**
			 * 获取订单详情
			 * @param {String} orderId
			 */
			async getOrderDetail(orderId) {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/order/detail',
					data: { order_no: orderId }
				})
				if (res.status === 1) {
					this.orderDetail = res.data
					this.orderDetail.items.map(item => {
						item.image = this.$baseUrl + item.image
						return item
					})
					this.orderDetail.shipping_no&&(this.orderDetail.shipping_no = this.orderDetail.shipping_no.split(':'))
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 跳转发票详情
			 * @param {String} id
			 */
			showInvoice(id) {
				if (!id.length) {
					return
				}
				this.pageTo('invoiceDetail?invoiceId='+id)
			},
			/**
			 * 跳转合同详情
			 * @param {String} id
			 */
			showContract(id) {
				if (!id.length) {
					return
				}
				this.pageTo('contractDetail?contractId='+id)
			},
			
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			},
			
		}
	}
</script>

<style lang="scss">
	.order-detail{
		height: 100%;
		.address{
			margin-top: 20rpx;
			padding: 40rpx 0;
			background: $uni-bg-color;
			border-radius: $uni-border-radius-base;
			&-info{
				width: 580rpx;
				&-mobile{
					margin-left: 20rpx;
					color: $uni-text-color-grey;
					font-size: $uni-font-size-sm2;
				}
				&-address{
					width: 580rpx;
					font-size: $uni-font-size-sm2;
				}
			}
			&-img{
				height: 68rpx;
				width: 68rpx;
				margin: 0 30rpx;
				border-radius: 50%;
			}
		}
		
		.tit{
			margin-top: 20rpx;
			font-weight: bold;
			margin-left: 30rpx;
		}
		.main{
			padding: 30rpx;
			background: $uni-bg-color;
			border-top: 1rpx solid $uni-border-color;
			border-bottom: 1rpx solid $uni-border-color;
			&-img{
				width: 200rpx;
				height: 200rpx;
				margin-right: 40rpx;
				background: $uni-bg-color-grey;
			}
			&-right{
				width: 450rpx;
				.name-price-amount{
					margin-bottom: 30rpx;
					.name{
						width: 350rpx;
						line-height: 1.2;
						height: 74rpx;
					}
					.price, .amount{
						font-size: $uni-font-size-sm2;
						color: $uni-text-color-grey;
						text-align: right;
					}
				}
				.type, .daterange{
					font-size: $uni-font-size-sm1;
				}
			}
		}
		
		.prices{
			margin-top: 20rpx;
			padding: 10rpx 30rpx;
			background: $uni-bg-color;
			border-top: 1rpx solid $uni-border-color;
			line-height: 2.4;
			&-item{
				font-size: $uni-font-size-sm2;
				&-name{
					color: $uni-text-color-grey2;
				}
				&-value{
					color: $uni-text-color-grey;
				}
			}
			&-total{
				border-top: 1rpx solid $uni-border-color;
			}
		}
		
		.info{
			padding: 10rpx 30rpx;
			background: $uni-bg-color;
			border-top: 1rpx solid $uni-border-color;
			&-item{
				font-size: $uni-font-size-sm2;
				color: $uni-text-color-grey2;
				height: 77rpx;
			}
		}
		.cert-add-upload{
			.cert-add-upload-img{
				width: 666rpx;
				height: 352rpx;
				display: block;
				margin: 20rpx auto;
				background: $uni-bg-color-grey2;
				
			}
		}
		.btns{
			margin: 20rpx 0;
			height: 106rpx;
			text-align: right;
			background: $uni-bg-color;
			.btn{
				display: inline-block;
				line-height: 56rpx;
				margin: 25rpx 30rpx 25rpx 0;
				padding: 0 28rpx;
				border-radius: 28rpx;
				font-size: $uni-font-size-sm2;
				border: 1rpx solid $uni-border-color;
			}
		}
	}
</style>
        